<template>
  <view class="u-flex u-row-between">
    <view v-for="item in goodsList" :key="item.img" @click="goodsDetails(item)">
	  <view class="goods-img">
        <u-image :src="item.img" style="height: 286rpx;" mode="aspectFit" width="100%">
          <u-loading slot="loading"></u-loading>
        </u-image>
      </view>
      <view class="goods-desc">
        <view class="goods-title u-line-2">
          {{ item.title || '盒马生鲜双十二线下生活节买一赠一' }}
        </view>
        <view class="endBox">
          <text class="deadline_label u-m-r-10">距结束</text>
          <text class="deadline_time"> 5天</text>
        </view>
        <view class="u-flex u-row-between u-p-10 collect">
          <view>
            <u-icon name="star" color="#979797" class="u-m-r-10"></u-icon>
            999
          </view>
          <view>
            <u-icon name="account" color="#979797" class="u-m-r-10"></u-icon>
            999
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: {
    goodsList: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {
  },
  methods: {
	  // 跳转到活动详情页
	goodsDetails(item){
		uni.navigateTo({
			url:'/pages/goods/goodsDetails?item=' + JSON.stringify(item)
		})
	}
  },
};
</script>
<style lang="scss" scoped>
$w_94: 94%;

.goods-img {
  position: relative;
  margin: 0 auto;
  height: 286rpx;
  width: 216rpx;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  overflow: hidden;
  > img {
    width: 100%;
    height: 100%;
  }
}

.goods-desc {
  border-bottom-left-radius: 20rpx;
  border-bottom-right-radius: 20rpx;
  width: $w_94;
  background: #fff;
  padding: 8rpx 0 8rpx 8rpx;
  margin: 0 auto;
  > .goods-title {
    font-size: 26rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #010103;
  }
	
  > .goods-bottom {
    display: flex;
    font-weight: bold;
    > .goods-price {
      line-height: 2;
      color: $main-color;
    }
  }
}
.endBox{
	background: #FFF6EB;
	margin-top: 16rpx;
	width: 100%;
	padding-right: 8rpx;
	box-sizing: border-box;
	height: 36rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	line-height: 26rpx;
}
.deadline_label {
  // width: 70px;
  // height: 26px;
  height: 100%;
  background: #fa6c3e;
  line-height: 36rpx;
  font-size: 18rpx;
  font-family: PingFangSC-Light, PingFang SC;
  font-weight: 300;
  padding: 0px 4rpx;
  color: #ffffff;
}
.deadline_time {
  height: 26rpx;
  font-size: 18rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #fa6c3e;
  line-height: 26rpx;
  background: #fff6eb;
  border-radius: 4rpx;
}
.collect {
  font-size: 20rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #aaaaaa;
}
</style>
